<template>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside width="200px">
      <h1 class="logo"></h1>
    </el-aside>
    <el-container>
      <!-- header -->
      <el-header>
        <el-row type="flex" class="row-bg" justify="space-between">
          <el-col :span="6">
            <div class="grid-content left">
            <i class="iconfont icon-zhankai"></i>
            </div>
            </el-col>

          <el-col :span="6">
            <div class="grid-content center">
              银行管理系统
              </div>
              </el-col>

          <el-col :span="6">
            <div class="grid-content right">
               <el-avatar shape="square" :size="40" :src="avatarUrl"></el-avatar>
               <b>欢迎您:管理员</b>
              </div>
              </el-col>
        </el-row>
      </el-header>

      <!-- main -->
      <el-main>
        <router-view></router-view>>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data(){
    return{
      avatarUrl:"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
    }
  }
}
</script>


<style scoped lang="less">
.el-header{
  min-height: 6px !important;
  background: linear-gradient(135deg,#0873ec,#2295f3);
  color: #fff;
  text-align: center;
  font-weight: bolder;
  line-height: 40px;
  // line-height: 60px;
  
  .left {
		text-align: left;
		i {
			font-size: 30px;
			cursor: pointer;
		}
	}
  .center {
		font-size: 30px;
	}
  .el-avatar{
      vertical-align: middle;
      margin-right: 10px;
    }
}

.el-aside {
  background: linear-gradient(135deg,#0873ec,#2295f3);
  color: #333;
  text-align: center;
  // line-height: 200px;
  .logo{
    min-height: 60px;
    background: #fff;
  }
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  // line-height: 160px;
}

.el-container {
  margin-bottom: 40px;
  height: 100%;
}

// .el-container:nth-child(5) .el-aside,
// .el-container:nth-child(6) .el-aside {
//   line-height: 260px;
// }

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    // background-color: #f9fafc;
  }
</style>